<template>
  <div class="details-container">
    <div class="essay-head" :class="[isscroll ? '' : 'active']">
      <div>
        <div class="div1 clearfix">
          <div class="fl">设计师如何在业务中体现个人价值</div>

          <div class="fr">
            <img src="/src/assets/img/1.png" alt="" />
            <span> Cappo </span>
            <div class="overall-btn">
              <a href="">雇佣我</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- banner -->
    <CommonHead></CommonHead>

    <div class="essay-box">
      <div class="contentTitle" title="【文】一篇文章搞懂如何做好对话框设计">
        【文】一篇文章搞懂如何做好对话框设计
      </div>

      <div direction="tous">
        <div class="sculpture-le clearfix">
          <div class="fl sculpture-img">
            <img src="/src/assets/img/1.png" alt="" />
            <div>
              <p class="surname">Cappo</p>
              <p class="name-position">
                苏州 | 平面设计师 <span> 6天前</span>&nbsp; &nbsp;391 浏览
              </p>
            </div>
          </div>
          <div class="fr overall-btn">
            <a href="">雇佣我</a>
          </div>
        </div>
      </div>

      <div class="zhaiyao">
        追波平台对于互联网UI界面设计有着举足轻重的定位，对追波设计的研究会让我们看清设计的方向。
      </div>

      <div class="neir">
        <div>
          <br />
          <div class="media-wrap image-wrap">
            <img src="https://img.zcool.cn/community/02atlyrcnkhoyl0sf8cwrm3231.jpg" />
          </div>
          <br />
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p>
            作为UX设计师，很多人在讲述改版前后方案对比时，对于改版后方案，会引用业务功能层面的优化&amp;升级，并以此证明设计的价值，类似下图的呈现方式：
          </p>
          <p></p>
          <br />
          <div class="media-wrap image-wrap">
            <img src="https://img.zcool.cn/community/02bu0nxyiul5wce7qznav23435.jpg" />
          </div>
          <br />
          <p>但这样的论证对于衡量设计的价值，真的有说服力吗？</p>
          <p></p>
          <p></p>
          <p>
            以往收到的面试作品集中，不乏这样的案例。每每追问一句，这更多是业务和功能层面带来的变动，设计在里面起到了哪些作用？
            得到的答案大多不尽人意，甚至有些新人会陷入深深的自我怀疑：
            设计能做的，仅仅是对业务的支持吗？都这个年代了，难道UX设计师本质上还是美工？
          </p>
          <p></p>
          <p></p>
          <p>
            针对上述问题，我们该如何找到设计的发力点，并在业务支持中体现个人的设计价值呢？
            我们可以尝试通过下面几个步骤，来找到一些解决问题的角度。
          </p>
          <p></p>
          <p></p>
          <p></p>
          <br />
          <div class="media-wrap image-wrap">
            <img
              src="https://img.zcool.cn/community/02b0ojkjwuh5kolgjvsooj3035.png"
              width="458px"
              height="247.05px"
              style="width: 458px; height: 247.05px"
            />
          </div>
          <br />
          <p></p>
          <p></p>
          <p></p>
          <br />
          <div class="media-wrap image-wrap">
            <img
              src="https://img.zcool.cn/community/0269bpvs2yfeqak1jeshgk3639.png"
              width="555px"
              height="110px"
              style="width: 555px; height: 110px"
            />
          </div>
          <br />
          <p></p>
          <p>
            作为设计师，对于业务背景和目标的了解是基本要求，但在此基础上如果我们有更深入的了解和挖掘，会让我们对所负责的业务建立更深刻的认知。
          </p>
          <p></p>
          <p></p>
          <p>比如，我们可以从下面举例的一些维度来思考一下：</p>
          <h4></h4>
          <br />
          <div class="media-wrap image-wrap">
            <img
              src="https://img.zcool.cn/community/02zefhmpvumrustkmdadys3438.jpg"
              width="777px"
              height="446px"
              style="width: 777px; height: 446px"
            />
          </div>
          <br />
          <p></p>
          <p></p>
          <p>
            所以工作中当拿到需求后，如果我们能主动挖掘更深层次的背景和目标，站在更高、更多元的维度来思考，会对当前的工作有更全面的理解，设计方向的确定也会更加精准。
            优秀设计师对业务的理解，绝不只限于产品文档。要站在更宏大视角下看待工作中的每一个需求，它们无论大小都充满着意义，都能在我们心里激发出足够的<strong>“使命感”</strong>。
          </p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <br />
          <div class="media-wrap image-wrap">
            <img
              src="https://img.zcool.cn/community/024u3iv4uac5byhaagmkgw3932.png"
              width="557px"
              height="110px"
              style="width: 557px; height: 110px"
            />
          </div>
          <br />
          <p>
            在充分了解业务背景和目标后，可以通过业务流程图来分析核心流程&amp;业务逻辑，对于需求的功能框架及交互流程有更清晰、更完整的理解，可以增加对整体流程的<strong
              >“掌控感” </strong
            >。
          </p>
          <p></p>
          <p></p>
          <br />
          <div class="media-wrap image-wrap">
            <img src="https://img.zcool.cn/community/02c4hn7kfudol4gav1foxp3033.jpg" />
          </div>
          <br />
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <br />
          <div class="media-wrap image-wrap">
            <img
              src="https://img.zcool.cn/community/02prqo4i6yd7b9scp8gmwk3634.png"
              width="557px"
              height="109px"
              style="width: 557px; height: 109px"
            />
          </div>
          <br />
          <p></p>
          <p>
            我们对于前期拿到的有效信息，不能只是简单对其整理和罗列，而是要通过洞察找到一些适合设计侧推动的问题或机会，并将其转化为设计发力点。
            需要注意的是，重要但设计侧无法发力的信息，不是我们当下的重点。
          </p>
          <p>通常在业务支持中，设计侧的发力点主要体现在以下三个方面：</p>
          <p></p>
          <br />
          <div class="media-wrap image-wrap">
            <img src="https://img.zcool.cn/community/02r7vni5dnhx12yv3ijssg3939.jpg" />
          </div>
          <br />
          <p></p>
          <p></p>
          <h3>3.1功能搭建：</h3>
          <p></p>
          <p>主要体现在<strong>美观度、易用性、实现成本</strong>几个角度。</p>
          <p></p>
          <p>
            关于美观度和易用性，对于设计师来说属于基本要求，虽然基础但极其重要，设计输出品质的高低，都取决于设计师的基本功。同样一个需求，功底深厚的设计师总会做的更加惊艳。所以这部分始终需要我们持续精进。
          </p>
          <p></p>
          <p>
            关于实现成本，依赖于我们的经验累积和思考总结。如方案构思中要充分考虑产品功能的普适性和拓展性，在输出时要保证规范的一致性，复杂模块的切图或动效输出也要从研发角度选择更易实现的方式。这部分属于设计师的隐性价值，不做也不会有影响，但是做得好就可以更大程度的节约成本，从而间接为公司创造价值，还会在产研团队中大大提升设计师的专业度和信任感，更有利于长期协作。
          </p>
          <p></p>
          <p></p>
          <br />
          <div class="media-wrap image-wrap">
            <img src="https://img.zcool.cn/community/02bfg6rly5kkjldhwnaq3t3433.jpg" />
          </div>
          <br />
          <p></p>
          <p></p>
          <h3>3.2感知强化：</h3>
          <p></p>
          <p>
            通过设计手段来放大/突出产品功能，并强化用户感知，这也是设计的重要价值体现。
            可以从<strong>正向</strong>和<strong>负向</strong>两个角度入手：
          </p>
          <p></p>
          <p>
            <strong>增强正向牵引</strong>-通过设计手法强化利益点、关注点，牵引用户完成目标行为。
          </p>
          <p src="https://img.zcool.cn/community/02vdwnr5gwoflwfdwoalyg3437.jpg"></p>
          <br />
          <div class="media-wrap image-wrap">
            <img src="https://img.zcool.cn/community/02cvcbjrcec71dkep2enzg3436.jpg" />
          </div>
          <br />
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p>
            <strong>降低负向焦虑</strong
            >-通过突出展示关键信息（如安全、信任等方面），来降低用户负向焦虑，从而促使用户完成目标行为。
          </p>
          <p></p>
          <br />
          <div class="media-wrap image-wrap">
            <img src="https://img.zcool.cn/community/02aofmwwfs1dfhoxtnijp53238.jpg" />
          </div>
          <br />
          <p></p>
          <p></p>
          <p></p>
          <h3></h3>
          <h3>3.3效率提升：</h3>
          <p></p>
          <p>可从两方面入手提升效率</p>
          <p></p>
          <p>
            <strong>信息&amp;流程优化-</strong
            >通过发现关键流程中的问题&amp;卡点并对其进行优化升级，来提升用户的使用效率。常用方法有信息精简、信息聚合、信息后置等方式，实际工作中可结合具体情况选择适合方法。
          </p>
          <p></p>
          <br />
          <div class="media-wrap image-wrap">
            <img src="https://img.zcool.cn/community/02ahex5242npyn3ogtltdx3434.jpg" />
          </div>
          <br />
          <p></p>
          <p src="https://img.zcool.cn/community/02ego7iwvduusvqwgmchyq3631.jpg"></p>
          <p></p>
          <p></p>
          <p>
            <strong>用户行为优化-</strong
            >通过对用户的重要或常用行为提供快捷操作甚至行为预判，来提升用户的使用效率。
          </p>
          <p></p>
          <p></p>
          <br />
          <div class="media-wrap image-wrap">
            <img src="https://img.zcool.cn/community/02a1iueupa8zy34lfhfjq13338.jpg" />
          </div>
          <br />
          <p></p>
          <p>1.消息列表通常在导航栏存在“一键清除”快捷操作按钮，提升用户标记已读的效率；</p>
          <p>
            2.短视频平台在刷到有趣特效视频时，通常带有“拍同款”快捷入口，方便用户即时进入创造并发布新内容；
          </p>
          <p>
            3.在端外复制好地址文案并返回寄件页面时，会自动弹出地址识别结果弹窗，通过系统对用户行为的预判，提升信息录入效率。
          </p>
          <p><br /></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <br />
          <div class="media-wrap image-wrap">
            <img
              src="https://img.zcool.cn/community/0280hl7hpexg1fvjv65kn83633.png"
              width="558px"
              height="110px"
              style="width: 558px; height: 110px"
            />
          </div>
          <br />
          <p>
            对于如何衡量业务支持中设计的价值，可以通过定量和定性的方式来衡量。具体方法相关教程有很多，再此不展开讲，只强调下需要注意的点：
          </p>
          <p></p>
          <p></p>
          <h3>定量分析：</h3>
          <p></p>
          <h4>1.找到关联性强的数据</h4>
          <p>
            我们要根据需要验证的不同内容，定义符合条件的关键行为，并确定与之对应的关键的指标，注意指标一定要具有强关联性。
            如上线一个新活动，我们可以根据活动入口banner的CTR、最终转化率等<strong>关联性强</strong>的数据来验证方案有效性，而DAU、使用时长等指标则不能直接体现方案价值，不具备说服力，讲述方案价值时一定要选择合适的数据指标
          </p>
          <p></p>
          <h4>2.控制变量</h4>
          <p>
            在验证方案中设计的价值时，要保证设计因素为单一变量，尽量减少其他因素对结果的影响。典型方法是利用AB测试，在其他条件均相同的条件下，验证设计点对结果的影响，进而可以量化设计的价值；
          </p>
          <p></p>
          <br />
          <div class="media-wrap image-wrap">
            <img src="https://img.zcool.cn/community/02o7txxijhot0q3c6buind3135.jpg" />
          </div>
          <br />
          <p></p>
          <p>
            如图示意，与对照组相比，实验组1是正确的，这里的单一变量只有按钮不同，其他因素均相同；而实验组2则不是单一变量，奖励策略、文案、按钮样式均不同，最终的数据无法量化到具体每个元素对应的影响和价值。
          </p>
          <p></p>
          <p></p>
          <h3>定性分析：</h3>
          <h3></h3>
          <p>
            也可以从用户视角出发，来了解用户对于方案的反馈，进而确定是否满足用户诉求。同时，定性分析还可以帮助设计师了解用户对于体验和情感层面的看法，这些对于设计价值的评估同样非常重要。
          </p>
          <p></p>
          <p></p>
          <p>
            综上，通过定量和定性分析，可以有效地验证设计在业务中的价值，也可以帮助设计师更精准地了解用户需求、评估设计效果，进而为业务做出更有价值的贡献。
          </p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <br />
          <div class="media-wrap image-wrap">
            <img
              src="https://img.zcool.cn/community/024fl8seeckt1f59vrk2y33439.png"
              width="552px"
              height="110px"
              style="width: 552px; height: 110px"
            />
          </div>
          <br />
          <p></p>
          <p>
            对业务的支持是大多数设计师日常最主要的工作，如何在这样看似基础的工作中体现价值，是我们需要思考的问题。
          </p>
          <p></p>
          <p>我试着从下面3点来阐述个人对于价值体现的理解：</p>
          <p></p>
          <p><strong>1.优秀完成本职工作</strong></p>
          <p>
            如果我们能充分理解需求，方案产出与核心目标精准锚定，且专业水准过硬，那么就可以说我们优秀的完成了对业务的支持；
          </p>
          <p></p>
          <p><strong>2.间接创造价值</strong></p>
          <p>
            如果我们在项目中可以依据经验，合理协调资源、规划排期、选用合适方案，进而节约了人力/时间/经济成本并提高开发效率，那么我们也为公司间接地创造了价值；
          </p>
          <p></p>
          <p><strong>3.价值定位-催化剂</strong></p>
          <p>
            我们在明确业务所处阶段的基础上，找到设计价值定位及发力点。我把业务支持阶段的设计定义为“催化剂”（自身不是反应物，但能大幅提升化学反应的速率）
          </p>
          <p></p>
          <p></p>
          <br />
          <div class="media-wrap image-wrap">
            <img src="https://img.zcool.cn/community/02xtp2rrfldo09ka9pubu93731.jpg" />
          </div>
          <br />
          <p></p>
          <p>
            在功能搭建的同时，我们的发力点围绕在<strong>强化感知</strong>和<strong>提高效率</strong>两方面：强化感知，提高用户的主观意愿；提高效率，优化产品的操作路径。
            围绕这两点来发力，在各个场景链路中撒下“设计催化剂”，让关键数据指标加速提升，这也是设计在这个阶段的意义和价值所在。
          </p>
          <p></p>
          <p></p>
          <p>
            最后，希望大家在未来工作中能够明确自身定位，找到发力点并将专业能力发挥出来，虽然当下人工智能的发展势头强劲，但我们对于实际业务的洞察和价值贡献，现阶段的GPT还是无法替代的，这点你赞同吗？
          </p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </div>
      <div class="recommendBox">
        <div class="recBox">
          <svg class="sc-1xa8zfl-0 lexfAW" width="28" height="28" cursor="pointer" color="#222222">
            <use xlink:href="#icon-detail-like"></use>
          </svg>
        </div>
        <span size="16" color="black2" class="sc-jqn0up-3 dTOzvT likeNum">5</span>
      </div>
    </div>

    <div class="related-recommendations">
      <p>相关推荐</p>
      <div class="index-case">
        <div class="container">
          <div class="row">
            <div class="col-lg-3 col-sm-6" v-for="item in list" :key="item.id">
              <div class="case-div">
                <div class="case-img pr">
                  <a href="/studydetail">
                    <img
                      :src="item.image ? item.image : require('../assets/img/1.jpg')"
                      alt=""
                      class="w100"
                    />
                  </a>
                </div>
                <div class="case-bot">
                  <p class="case-title">
                    <a href="/studydetail">{{ item.title }}</a>
                  </p>
                  <p class="case-bq">
                    <span class="glance-span"> <i class="iconfont icon-liulan"></i> 315 </span>

                    &nbsp;&nbsp;<span class="glance-span">
                      <i class="iconfont icon-dianzan_kuai"></i> 11
                    </span>
                    &nbsp;&nbsp;<span class="glance-span">
                      <i class="iconfont icon-shoucang"></i> 22
                    </span>
                  </p>

                  <div class="sculpture-box clearfix pr">
                    <div class="sculpture fl">
                      <a href="" @mouseover="hover = true" @mouseleave="hover = false">
                        <img
                          :src="item.userpic ? item.userpic : require('../assets/img/1.png')"
                          alt=""
                          class="w100"
                        />
                        {{ item.username }}
                      </a>
                      <div class="sculpture-hover pa">
                        <div class="sculpture-top clearfix">
                          <div class="fl sculpture-left">
                            <img
                              :src="item.userpic ? item.userpic : require('../assets/img/1.png')"
                              alt=""
                            />
                            <div>
                              <p class="surname">{{ item.username }}</p>
                              <p class="name-position">网页设计师</p>
                            </div>
                          </div>
                          <div class="fr hire-me overall-btn">
                            <a href="">雇用我</a>
                          </div>
                        </div>
                        <ul class="sculpture-works-ul clearfix">
                          <li>
                            <a href="">
                              <img src="@/assets/img/2.jpg" alt="" />
                            </a>
                          </li>
                          <li>
                            <a href="">
                              <img src="@/assets/img/3.jpg" alt="" />
                            </a>
                          </li>
                          <li>
                            <a href="">
                              <img src="@/assets/img/4.jpg" alt="" />
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="fr collect">
                      <span> 4天前 </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <foot-copyright></foot-copyright>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isscroll: false
    }
  },

  mounted() {
    // 监听页面滚动事件
    window.addEventListener('scroll', this.scrolling)
  },
  methods: {
    scrolling() {
      // 滚动条距文档顶部的距离
      let scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 滚动条滚动的距离
      let scrollStep = scrollTop - this.oldScrollTop
      //   console.log("header 滚动距离 ", scrollTop);
      // 更新——滚动前，滚动条距文档顶部的距离
      this.oldScrollTop = scrollTop

      //变量windowHeight是可视区的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      //变量scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight

      //滚动条到底部的条件
      //   if (scrollTop + windowHeight == scrollHeight) {
      //     //你想做的事情
      //     console.log("header  你已经到底部了");
      //   }
      //   if (scrollStep < 0) {
      //     this.isscroll=false
      //   } else {
      //    this.isscroll=true
      //   }
      // 判断是否到了最顶部
      if (scrollTop <= 200) {
        this.isscroll = true
      } else {
        this.isscroll = false
      }
    },

    beforeDestroy() {
      window.removeEventListener('scroll', this.scrolling)
    }
  }
}
</script>

<style>
</style>